﻿<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>幻灯片模板展示</title>

<link rel="stylesheet" href="css/style.css" />

<!--[if IE]>
<link rel="stylesheet" href="css/style.ie.css" />
<![endif]-->

<script src="js/jquery.js"></script>

<script src="js/script.js"></script>
<script src="js/mode.js"></script>

<!--[if IE]>
<script src="js/script.ie.js"></script>
<![endif]-->

</head>

<body>

<div class="tmpl-title">
    <h1>幻灯片模板展示(大标题|封面)</h1>
    <section>
        <p>赵锦江</p>
    </section>
</div>

<div>
    <h2>常规页面(标题)</h2>
    <section>
        <ul>
            <li>列表内容1</li>
            <li>列表内容2<ul>
            <li>列表内容3</li></ul></li>
        </ul>
        <ol>
            <li>列表内容1</li>
            <li>列表内容2</li>
            <li>列表内容3</li>
        </ol>
    </section>
</div>

<div class="tmpl-columns">
    <h2>正文为两列内容</h2>
    <section>
        <div class="column">
            <p>第一列的内容</p>
        </div>
        <div class="column">
            <p>第二列的内容</p>
        </div>
    </section>
</div>

<div class="tmpl-columns">
    <h2>正文为两列内容(含小标题)</h2>
    <section>
        <div class="column">
            <h3>第一列的标题</h3>
            <p>第一列的内容</p>
        </div>
        <div class="column">
            <h3>第二列的标题</h3>
            <p>第二列的内容</p>
        </div>
    </section>
</div>

<div class="tmpl-block">
    <h2>正文是一张表格</h2>
    <section>
        <table width="100%" border="1">
            <thead>
                <tr>
                    <th>栏目A</th>
                    <th>栏目B</th>
                    <th>栏目C</th>
                    <th>栏目D</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>单元格A1</td>
                    <td>单元格B1</td>
                    <td>单元格C1</td>
                    <td>单元格D1</td>
                </tr>
                <tr>
                    <td>单元格A2</td>
                    <td>单元格B2</td>
                    <td>单元格C2</td>
                    <td>单元格D2</td>
                </tr>
                <tr>
                    <td>单元格A3</td>
                    <td>单元格B3</td>
                    <td>单元格C3</td>
                    <td>单元格D3</td>
                </tr>
                <tr>
                    <td>单元格A4</td>
                    <td>单元格B4</td>
                    <td>单元格C4</td>
                    <td>单元格D4</td>
                </tr>
            </tbody>
        </table>
    </section>
</div>

<div class="tmpl-block">
    <h2>正文为一张图片</h2>
    <section>
        <img alt="" src="src.tmpl/picture.jpg" />
    </section>
</div>

<div class="tmpl-block">
    <h2>正文为一段视频</h2>
    <section>
        <video controls>
            <source src="https://html5rocks.googlecode.com/hg/slides.html5rocks.com/src/chrome_japan.webm" type='video/webm; codecs="vp8, vorbis"' />
            <source src="https://html5rocks.googlecode.com/hg/slides.html5rocks.com/src/chrome_japan.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
            <source src="https://html5rocks.googlecode.com/hg/slides.html5rocks.com/src/chrome_japan.ogv" type='video/ogg; codecs="theora, vorbis"' />
            对不起，您的浏览器不支持该视频的格式
        </video>
    </section>
</div>

<div class="tmpl-subtitle">
    <h2>小标题</h2>
    <p>描述文字</p>
</div>

<div class="tmpl-picture">
    <section>
        <img alt="" src="src.tmpl/picture.jpg" />
    </section>
    <h2>图片展示(图片标题)</h2>
    <p>图片描述</p>
</div>

<div class="tmpl-subtitle">
    <h2>木有了！</h2>
    <p>╮(╯▽╰)╭</p>
</div>

</body>

</html>
